<template>
  <view class="search">
    <!-- 头部 -->
    <view class="top-top">
      <view class="topbox">
        <view class="top-oneitem"></view>
        <view class="top-twoitem">
          <view class="top-back" @click="backindex()">
            <image src="../../static/resort/fanhui.png" mode=""
              style="height: 34rpx;width: 20rpx;padding-top: 35rpx;margin-right: 20rpx;">
            </image>
          </view>
          <view class="top-search">
            <view class="top-srarch-img">
              <image src="../../static/resort/search.png" mode="" style="width: 32rpx;height: 32rpx;margin-top: 20rpx;">
              </image>
            </view>
            <view>
              <input placeholder="输入您的需求" type="text" class="top-search-input">
            </view>
            <view @click="tocamera()">
              <image src="../../static/resort/camera.png" mode="" style="width: 32rpx;height: 32rpx;margin-top: 20rpx;">
              </image>
            </view>
            <view class="top-search-line">

            </view>
            <view class="top-search-text" @click="tosearchput()">
              搜索
            </view>
          </view>
          <view class="top-but">
            <button class="topbutton">发布需求</button>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 175rpx;">

    </view>
    <!-- 头部 -->
    <!-- 最近搜索 -->
    <view class="Recentsearches" v-show="RecentsearchesList.length">
      <view class="alltop">
        <view class="top-left">
          <view class="image">
            <image src="../../static/resort/clock.png" class="img" mode=""></image>
          </view>
          <view class="title">
            最近搜索
          </view>
        </view>
        <view class="top-right">
          <view class="title" v-if="show" @click="detele">
            全部删除
          </view>
          <view class="image" @click="show=!show">
            <image src="../../static/resort/trash.png" class="img" mode=""></image>
          </view>
        </view>
      </view>

      <view class="content" v-if="show1">
        <view class="flex">
          <view class="for" v-for="(item,i) in RecentsearchesList" :key="i">
            <view class="text">
              {{item.text}}
            </view>
            <!-- 点击关闭 -->
            <!-- 点击关闭 -->
            <view class="close">
              <image src="../../static/resort/close.png" class="img-close" mode="" v-if="show" @click="close(i)">
              </image>
            </view>
          </view>
          <view class="right-more">
            <view class="more">
              更多
            </view>
            <view class="img">
              <image src="../../static/resort/xialasanjiao.png" class="imgmore" mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 最近搜索 -->
    <!-- 搜索发现 -->
    <view class="SearchDiscovery" v-if="!show">
      <view class="alltop">
        <view class="top-left">
          <view class="image">
            <image src="../../static/resort/zhinanzhen.png" class="img" mode=""></image>
          </view>
          <view class="title">
            搜索发现
          </view>
        </view>
        <view class="top-right">
          <view class="title title-block">
            换一换
          </view>
          <view class="image">
            <image src="../../static/resort/shuaxin.png" class="img" mode=""></image>
          </view>
        </view>
      </view>
      <view class="content">
        <view class="flex">
          <view class="pink">
            <view class="pink-con" @click="todiscern()">
              <view class="text1">
                富士康招普工
              </view>
              <view class="hot">
                热
              </view>
            </view>
            <view class="close"></view>
          </view>
          <view class="for" v-for="(item,i) in SearchDiscoveryList" :key="i">
            <view class="text">
              {{item.text}}
            </view>
            <view class="close">
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 搜索发现 -->
    <!-- 热度榜单 -->
    <view class="HeatRanking">
      <view class="bigtitle">
        热度榜单
      </view>
      <view class="HeatRanking-con">
        <view class="HeatRanking-for" v-for="(item,index) in HeatRankingList" :key="index">
          <view class="HeatRanking-left">
            <view class="number1">
              {{item.number}}
            </view>
            <view class="text-long">
              {{item.textlong}}
            </view>
          </view>
          <view class="HeatRanking-right">
            <view class="hot">
              {{item.hot}}
            </view>
            <view class="number">
              {{item.number2}}
            </view>
          </view>
        </view>
        <view class="right-more">
          <view class="more">
            更多
          </view>
          <view class="img">
            <image src="../../static/resort/xialasanjiao.png" class="imgmore" mode=""></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 热度榜单 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        show1: true,
        // show2: true,
        RecentsearchesList: [{
            text: "车厘子"
          },
          {
            text: "烩面"
          }, {
            text: "苹果"
          }, {
            text: "鼻子变小"
          }, {
            text: "如何让鼻子变小"
          }, {
            text: "怎么让皮肤变白"
          }
        ],
        SearchDiscoveryList: [{
            text: "鼻梁增高器"
          },
          {
            text: "仙女裙"
          }, {
            text: "夹鼻器"
          }, {
            text: "小番茄"
          }, {
            text: "儿童玩具"
          }, {
            text: "千禧果"
          }, {
            text: "鼻子变大"
          },
          {
            text: "晚礼服女"
          }, {
            text: "千禧果"
          },
        ],
        HeatRankingList: [{
          number: "1",
          textlong: "紧急求助大家帮忙寻找孩",
          hot: "热",
          number2: "1019万"
        }, {
          number: "2",
          textlong: "找医术高明的医生看病",
          hot: "热",
          number2: "998.9万"
        }, {
          number: "3",
          textlong: "居家隔离人员需要找人帮",
          hot: "",
          number2: "864.2万"
        }, {
          number: "4",
          textlong: "找对象",
          hot: "",
          number2: "841.6万"
        }, {
          number: "5",
          textlong: "富士康招工",
          hot: "",
          number2: "768.7万"
        }, {
          number: "6",
          textlong: "乌克兰战场招临时工",
          hot: "",
          number2: "689.4万"
        }, {
          number: "7",
          textlong: "招航母抛光打蜡，导弹翻新",
          hot: "",
          number2: "576.3万"
        }, ],
      };
    },
    methods: {
      todiscern() {
        uni.navigateTo({
          url: "/pages/resort/discern"
        })
      },
      tosearchput() {
        uni.navigateTo({
          url: "/pages/resort/searchPut"
        })
      },
      backindex() {
        uni.navigateBack()
      },
      detele() {
        let t = this;
        uni.showModal({
          title: '提示',
          content: '你确定要删除吗',
          success: function(res) {
            if (res.confirm) {
              t.show1 = !t.show1
              console.log('确定');
            } else if (res.cancel) {
              console.log('取消');
            }
          }
        });
      },
      close(e) {
        this.RecentsearchesList.splice(e, 1);
      }
    },

  }
</script>

<style lang="scss">
  // 头部
  page {
    // background-color: #F5F5F5;
    background-color: #ddd;
  }

  .search {
    // height: 100vh;
    padding-bottom: 30rpx;
  }

  // 头部
  .top-top {
    width: 100vw;
    z-index: 99;
    position: fixed;
    top: 0;
    background-color: white;
  }

  .topbox {
    width: 95%;
    margin: auto;

    .top-oneitem {
      width: 100%;
      height: var(--status-bar-height);
    }

    .top-twoitem {
      height: 100rpx;
      width: 100%;
      display: flex;

      .top-search {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 15rpx;
        margin-top: 14rpx;
        width: 65%;
        height: 75rpx;
        border-radius: 50rpx;
        background-color: #F1F1F1;

        .top-search-input {
          height: 32rpx;
          margin-top: 15rpx;
          width: 250rpx;
        }

        .top-search-line {
          height: 44rpx;
          border-right: solid 1px #BBBDBD;
          margin-top: 15rpx;
        }

        .top-search-text {
          color: #58719D;
          margin-top: 13rpx;
        }
      }

      .top-but {
        width: 35%;

        .topbutton {
          line-height: 60rpx;
          color: white;
          font-size: 32rpx;
          margin-top: 20rpx;
          width: 80%;
          height: 60rpx;
          text-align: center;
          background-color: #FF2A31;
        }
      }
    }
  }

  // 头部
  // 最近搜索
  .Recentsearches {
    width: 90%;
    margin: auto;
    // background-color: #fff;
    margin-top: 30rpx;
  }

  .content {
    // border: 1px solid #000;
    margin-top: 36rpx;

    .flex {
      display: flex;
      flex-wrap: wrap;

      .for {
        margin-bottom: 37rpx;
        display: flex;
        align-items: center;
      }

      .text {
        margin: 0 7rpx 0 9rpx;
        background-color: #fff;
        padding: 11rpx 20rpx;
        border-radius: 30rpx;
      }

      .img-close {
        width: 26rpx;
        height: 26rpx;
        // display: none;
      }

      .close {
        width: 26rpx;
        height: 26rpx;
      }

      .right-more {
        padding-top: 10rpx;
        display: flex;
        justify-content: right;
        text-align: right;

        .more {
          margin-left: 20rpx;
          color: rgb(170, 170, 170);
          font-family: Noto Sans SC;
          font-size: 14px;
          font-weight: 400;
          // line-height: 21px;
        }

        .imgmore {
          margin-left: 10rpx;
          width: 20rpx;
          height: 10rpx;
        }
      }
    }
  }


  // 头部
  .alltop {
    display: flex;
    justify-content: space-between;

    .top-left {
      display: flex;
      width: 40%;
      align-items: center;

      .image {
        padding-top: 15rpx;
      }

      .img {
        width: 36rpx;
        height: 36rpx;
      }

      .title {
        margin-left: 12rpx;
        font-size: 36rpx;
      }

    }

    .top-right {
      margin: auto 0;
      display: flex;

      .img {
        width: 36rpx;
        height: 36rpx;
      }

      .title {
        color: rgb(170, 170, 170);
        margin-right: 12rpx;
        font-size: 28rpx;
        // display: none;
      }

      .title-block {
        display: block;
      }

    }
  }

  // 头部
  // 最近搜索
  // <!-- 搜索发现 -->
  .SearchDiscovery {
    width: 90%;
    margin: auto;
    // background-color: #fff;
    // margin-top: 10rpx;

    .content {
      .pink {
        margin-bottom: 37rpx;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .pink-con {
          display: flex;
          margin: 0 5rpx 0 5rpx;
          padding: 10rpx 13rpx;
          background: rgb(255, 225, 223);
          border-radius: 30rpx;
        }

        .hot {
          margin: auto;
          width: 32rpx;
          height: 32rpx;
          border: 1px solid rgb(255, 42, 49);
          border-radius: 2px;
          color: rgb(255, 42, 49);
          font-family: YouSheBiaoTiHei;
          font-size: 12px;
          font-weight: bold;
          line-height: 16px;
          letter-spacing: 0px;
          // text-align: left;
          text-align: center;
        }
      }

      .text1 {
        color: rgb(100, 100, 100);
        // background-color: #fff;
      }

      .text {
        font-size: 28rpx;
      }

      .close {
        width: 26rpx;
        height: 26rpx;
        // border: 1px solid #000;
      }

    }
  }

  // <!-- 搜索发现 -->
  // <!-- 热度榜单 -->
  .HeatRanking {
    width: 90vw;
    margin: auto;
    // margin-bottom: 30rpx;

    .bigtitle {
      color: rgb(255, 42, 49);
      font-family: Noto Sans SC;
      font-size: 44rpx;
      font-weight: bold;
      line-height: 33rpx;
      text-align: center;
      margin: 40rpx auto 30rpx;
    }

    .HeatRanking-con {
      padding: 10rpx;
      background-color: #fff;
      border-radius: 20rpx;

      .HeatRanking-for {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30rpx;
      }

      .HeatRanking-for:nth-child(n+3) .hot {
        border: 0;
      }

      .HeatRanking-for:nth-child(1) .number1 {
        background-color: #FC5C41;
      }

      .HeatRanking-for:nth-child(2) .number1 {
        background: linear-gradient(270.00deg, rgba(253, 123, 1, 1.00), rgba(254, 162, 3, 1.00) 100%);
      }

      .HeatRanking-for:nth-child(3) .number1 {
        background: linear-gradient(270.00deg, rgba(238, 185, 60, 1.00), rgba(255, 212, 63, 1.00) 100%);
      }

      .HeatRanking-left {
        display: flex;
        align-items: center;
        width: 55%;



        .number1 {
          // width: %;
          background: rgb(212, 178, 153);
          color: #fff;
          width: 40rpx;
          height: 40rpx;
          font-weight: bold;
          border-radius: 10rpx;
          text-align: center;
          margin-right: 15rpx;
        }



        .text-long {
          color: rgb(51, 51, 51);
          font-size: 30rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .HeatRanking-right {
        display: flex;
        width: 30%;

        .hot {
          margin: auto;
          width: 32rpx;
          height: 32rpx;
          border-radius: 2px;
          color: rgb(255, 42, 49);
          font-family: YouSheBiaoTiHei;
          font-size: 12px;
          font-weight: bold;
          line-height: 16px;
          border: 1px solid rgb(255, 42, 49);
          letter-spacing: 0px;
          // text-align: left;
          text-align: center;
        }

        .number {
          padding: 10rpx 13rpx;
          background: rgb(255, 240, 239);
          border-radius: 88px;
        }
      }
    }

    .right-more {
      width: 20%;
      // border: 1px solid #000;
      padding-top: 10rpx;
      display: flex;
      justify-content: right;
      // text-align: right;
      align-items: center;
      margin-top: 50rpx;
      margin: auto;

      .more {
        margin-left: 20rpx;
        color: rgb(170, 170, 170);
        font-family: Noto Sans SC;
        font-size: 14px;
        font-weight: 400;
        // line-height: 21px;
      }

      .imgmore {
        margin-left: 10rpx;
        width: 20rpx;
        height: 10rpx;
      }
    }
  }

  // <!-- 热度榜单 -->
</style>